<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户信息管理</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<table id="demo" class="layui-table" lay-filter="test"></table>
		<script type="text/html" id="toolbar1">
			<div>
				<a class="layui-btn layui-btn-danger" lay-event="add"><span class="layui-icon layui-icon-add-1"></span>添加</a>
				<a class="layui-btn layui-btn-danger" lay-event="add"><span class="layui-icon layui-icon-add-1"></span>添加</a>
				<a class="layui-btn layui-btn-danger" lay-event="add"><span class="layui-icon layui-icon-add-1"></span>添加</a>
				<a class="layui-btn layui-btn-danger" lay-event="add"><span class="layui-icon layui-icon-add-1"></span>添加</a>
				<a class="layui-btn layui-btn-danger" lay-event="add"><span class="layui-icon layui-icon-add-1"></span>添加</a>
			</div>
		</script>
		<script type="text/javascript" src="layui/layui.all.js"></script>
		<script type="text/javascript" src="layui/layui.js"></script>
		<script>
			layui.use(['element','table','jquery'],
			function(){
				var element = layui.element;
				var $ = layui.$;
				var table1 = layui.table;
				table1.render({
					elem:"#demo",
					id:"test1",
					toolbar:"#toolbar1",
					page: true,
					limit: 5,
					limits:[5,10,20,100],
					url:"dataJSON/userInfo.json",
					cols:[
					[{
						type:"checkbox"
					},
					{
						field:"uname",
						title:"用户名",
						sort:true
					},
					{
						field:"upwd",
						title:"密码"
					},
					{
						field:"date",
						title:"日期",
						templet:function(row){
							var mydate = row.date;
							return mydate.substr(0,mydate.indexOf("-"))+"年"
						}
					},
					{
						field:"",
						title:"操作",
						templet:function(data){
							var str1 = "<a lay-event='row_delect' title='删除' href='javascript:;'class='layui-btn layui-byn-success'><span class='layui-icon layui-icon-delete'></span></a>";
							var str2 = "<a lay-event='row_details' title='详细' href='javascript:;'class='layui-btn layui-byn-success'><span class='layui-icon layui-icon-ok'></span></a>";
							return str1 + str2;
						}
					  }
					 ]
					]
				});
				table1.on("toolbar(test)",function(obj){
					var data = obj.data;
					var event1 = obj.event;
					if(event1 ==="add"){
						layer.open({
							title:"添加用户",
							area:['600px','600px'],
							content: $("#frm_add").html()
						});
						table1.reload();
					}
					if(event1 === "delete"){
						var tbl_data=
						table1.checkStatus("test1");
						var data = tbl_data.data;
						if(tbl_data.data.length == 0){
							layer.alert("请选择一行数据");
						}else{
							alert(JSON.stringify(tbl_data.data[0].uname));
						}
						table1.reload();
					}
				});
				table1.on("tool(test)",function(obj){
					var myevent = obj.event;
					var data = obj.data;
					if(myevent == "row_delete"){
						alert("delete");
					}
					if(myevent == "row_details"){
						layer.open({
						title:"添加用户",
						area:['600px','600px'],
						content:$("#frm_add").html()
					});
					}
					
					$("#uname").val(data.uname);
					$("#upwd").val(data.upwd);
					$("#date").val(data.date);
				});
			});
		</script>
		<script type="text/html" id="frm_add">
			<div>
				用户名：<input type="text" class="layui-input" placeholder="please input a uname" /><br>
				用户名：<input type="text" class="layui-input" placeholder="please input a uname" /><br>
				用户名：<input type="text" class="layui-input" placeholder="please input a uname" /><br>
				用户名：<input type="text" class="layui-input" placeholder="please input a uname" /><br>
				用户名：<input type="text" class="layui-input" placeholder="please input a uname" /><br>
				用户名：<input type="text" class="layui-input" placeholder="please input a uname" /><br>
			</div>
		</script>
	</body>
</html>
